<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/ListRenovation.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>
	</head>
	<body>
		<div class="main" id="ListRenovation">
			<div class="ListRenovationContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<span class="text">智慧大棚智慧化改造一览表</span>
					<div class="rightH">{{yearMonth}} {{hoursMin}}</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem">
							<div class="titleComm"><span>基础数据</span></div>
							<div id="cropArea" class="commtop">
								<div class="croptitle">{{baseInfo.title}}</div>
								<div style="margin: 2px 0;font-size: 10px;">{{baseInfo.address}}</div>
								<div class="cropcon">{{baseInfo.introduce}}</div>
							</div>
						</div>
						<div class="leftItem" style="margin: 2vh 0;">
							<div class="titleComm"><span>基地信息列表</span></div>
							<div class="harmfulOrganisms">
								<div class="tabheader">
									<div style="width: 40%;">基地</div>
									<div style="width: 20%;">面积</div>
									<div style="width: 20%;">产量</div>
									<div style="width: 20%;">销售额</div>
								</div>
								<div class="scrolling-container" style="height: calc(100% - 36px);">
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in baseListsArr" :key="index">
											<div style="width: 40%;">{{item.name}}</div>
											<div style="width: 20%;">{{item.area}}</div>
											<div style="width: 20%;">{{item.output}}</div>
											<div style="width: 20%;">{{item.price}}</div>
										</div>
									</div>
									<div class="scrolling-list">
										<div class="scorllitem2" v-for="(item,index) in baseListsArr" :key="index">
											<div style="width: 40%;">{{item.name}}</div>
											<div style="width: 20%;">{{item.area}}</div>
											<div style="width: 20%;">{{item.output}}</div>
											<div style="width: 20%;">{{item.price}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>数据统计</span></div>
							<div id="datastatistics"></div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="topC">
							<div class="topItem">
								<img src="/screen/assets/images/regulatoryPlat/c1.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.baseCnt}}</div>
									<div class="topText">基地数量</div>
								</div>
							</div>
							<div class="topItem">
								<img src="/screen/assets/images/regulatoryPlat/c2.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.greenhouseCnt}}</div>
									<div class="topText">温棚数量</div>
								</div>
							</div>
							<div class="topItem">
								<img src="/screen/assets/images/regulatoryPlat/c3.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.baseArea}}</div>
									<div class="topText">基地面积(亩)</div>
								</div>
							</div>
							<div class="topItem">
								<img src="/screen/assets/images/regulatoryPlat/c4.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.greenhouseArea}}</div>
									<div class="topText">种植面积(亩)</div>
								</div>
							</div>
							<div class="topItem">
								<img src="/screen/assets/images/regulatoryPlat/c5.png" alt="" class="topimg">
								<div class="itemright">
									<div class="topNum">{{baseInfo.areaUseRate}}</div>
									<div class="topText">土地使用率</div>
								</div>
							</div>
						</div>
						<div class="selectWrapper">
							<div class="customelect">
								<div class="select__wrapper" @click="selectItemFlag = !selectItemFlag">
									<div class="selecttext">{{searchValue}}</div>
									<i :class="[selectItemFlag?'elactive':'','el-icon el-select__caret']">
										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
											<path fill="currentColor" d="m192 384 320 384 320-384z"></path>
										</svg>
									</i>
								</div>
								<div class="customelectafter" v-show="selectItemFlag"  v-cloak></div>
								<div class="selectItemw" v-show="selectItemFlag"  v-cloak>
									<div :class="[searchValue=='全部村镇'?'select':'','item']" @click="initMap({name:'全部村镇'})">全部村镇</div>
									<div v-for="(item,index) in townMaps" :key="index"  
									    :class="[searchValue==item.name?'select':'','item']" @click="initMap(item)">{{item.name}}</div>
								</div>
							</div>
						</div>
						<div id="mapView" class="mapView"></div>
						<!-- 物理防控器械应用情况 -->
						<div class="preventionControl">
							<div class="totalRightwrapper">
								<div class="totalTitlt">
									<span 
									  :class="[item.id==productid?'active':'','xh']" 
									  v-for="(item,index) in productMaps" 
									  :key="index"
									  @click="productChange(item.id)"
									>{{item.name}}</span>
									<span class="subtitle" @click="outerVisible = true">查看更多<img src="/screen/assets/images/right.png" alt=""
											class="rightjiantou"></span>
								</div>
								<div class="centerBotton">
									<div id="centerBottonL"></div>
									<div id="centerBottonR"></div>
								</div>
							</div>
							
						</div>
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<div class="info info3">
							<div class="infotitle" @click="goBig">
								<img src="/screen/assets/images/regulatoryPlat/laba.png" alt="" class="xititle" />
								{{notesInfo.title}}
								<span class="subtitle">查看详情</span>
							</div>
							<div class="infocon commtop">
								{{notesInfo.content}}
							</div>
							    
						</div>
						<div class="info info2">
							<div class="totalItemm">
								<img src="/screen/assets/images/regulatoryPlat/order1.png" alt="" class="total" />
								<div class="tottalright">
									<div class="baiNum">{{weatherInfo.humidity}}%</div>
									<div class="huiT">空气湿度</div>
								</div>
							</div>
							<div class="totalItemm">
								<img src="/screen/assets/images/regulatoryPlat/order2.png" alt="" class="total" />
								<div class="tottalright">
									<div class="baiNum">{{weatherInfo.temp}}℃</div>
									<div class="huiT">空气温度</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>统计</span></div>
							<div class="totalclaas">
								<div class="tlefclass">
									<div class="totaliI">
										已改造：{{baseInfo.greenhouseNormalCnt}}
									</div>
									<div class="totaliI">
										未改造：{{baseInfo.greenhouseMaintenanceCnt}}
									</div>
								</div>
								<div id="totalId"></div>
							</div>
							
						</div>
						<div class="leftItem" style="margin: 0.8vh 0;">
							<div class="titleComm"><span>溯源模块</span></div>
							<div class="origin">
								<div class="originitem originitem1" style="margin-bottom: 6px;">
									<div>
										<div class="origintitle">今日检测量</div>
										<div class="originnum">{{baseInfo.sourceStat.todayCheckCnt}}</div>
									</div>
									<img src="/screen/assets/images/regulatoryPlat/origin1.png" alt="" class="originimg" />
								</div>
								<div class="originitem originitem1" style="margin-bottom: 6px;">
									<div>
										<div class="origintitle">历史检测量</div>
										<div class="originnum2">{{baseInfo.sourceStat.historyCheckCnt}}</div>
									</div>
									<img src="/screen/assets/images/regulatoryPlat/origin2.png" alt="" class="originimg" />
								</div>
								<div class="originitem">
									<div class="originitemTop">
										<div class="toptite">合格率</div>
										<div class="topnum">{{baseInfo.sourceStat.passRate}}</div>
									</div>
									<div style="padding: 4px 8px;box-sizing: border-box;">
										<el-progress :show-text="false" :percentage="baseInfo.passRate" :stroke-width="10" color="#00CCD2" define-back-color="#32554cFF"></el-progress>
									</div>
								</div>
								<div class="originitem">
									<div class="originitemTop">
										<div class="toptite">不合格率</div>
										<div class="topnum">{{baseInfo.sourceStat.rejectRate}}</div>
									</div>
									<div style="padding: 4px 8px;box-sizing: border-box;">
										<el-progress :show-text="false" :percentage="baseInfo.rejectRate" :stroke-width="10" color="#00CCD2" define-back-color="#32554cFF"></el-progress>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>有害生物理念趋势</span></div>
							<div id="harmful"></div>
						</div>
					</div>
				</div>
				
				<!-- 弹出框 -->
				<div class="outerWrapper" v-show="outerVisible" v-cloak>
					<div class="outeHeader">
						<span style="width: 100%; text-align: center;">
							蔬菜
						</span>
						<img src="/screen/assets/images/del.png" alt="" class="del" @click="outerVisible = false">
					</div>
					<div class="homeTWrapper" style="height: 518px">
						<table class="homeTHeader" border="0">
							<tbody>
									<tr>
										<td class="label_td">品名</td>
										<td class="label_td">最低价</td>
										<td class="label_td">平均价</td>
										<td class="label_td">最高价</td>
										<td class="label_td">单位</td>
										<td class="label_td">发布时间</td>
									</tr>
									<tr v-for="(item,index) in productArr" :key="index">
										<td>{{item.product_name}}</td>
										<td>{{item.low_price}}</td>
										<td>{{item.avg_price}}</td>
										<td>{{item.high_price}}</td>
										<td>{{item.specification}}</td>
										<td>{{item.quote_date}}</td>
									</tr>
							</tbody>
						</table>
					</div>
				    <el-pagination
					  :page-size="pageSize"
					  :total="total"
					  :current-page="currentPage"
					  @current-change="handleCurrentChange"
					  layout="prev, pager, next"
				    >
				    </el-pagination>
				</div>
			</div>
			
		</div>

		<script type="module">
			const { createApp, ref, reactive, onMounted, nextTick} = Vue;
			import { barHengChartFun } from "/screen/echarts/baeheng.js"; //折线图区域
			import { lineAreaChartFun } from "/screen/echarts/lineAreaChart.js"; //折线图区域
			import { lineBar2ChartFun } from "/screen/echarts/lineBarChart2.js"; //柱状和折线图 虚线
			import { pieChartFun } from "/screen/echarts/pie.js"; //饼图
			import { mapChartFun } from "/screen/echarts/map.js"; //地图
			let baseUrl = 'https://sxadmin.sxgkx.cn/STleXfFAvV.php/screen/'
			createApp({
				setup() {
					const searchValue = ref('全部村镇')
					const selectItemFlag = ref(false);
					const searchIn = ref({});
					const searchIn1 = ref({});
					const baseInfo = ref({
					  title: "",        // 镇名称
					  introduce: "",        // 镇介绍
					  baseCnt: 0,            // 基地数量
					  baseArea: "",        // 基地面积
					  greenhouseCnt: 0,        // 大棚数量
					  greenhouseNormalCnt: 0,        // 大棚已改造数量
					  greenhouseMaintenanceCnt: 0,    // 大棚未改造完成数量
					  greenhouseArea: "",    // 种地面积
					  areaUseRate: "",        // 使用率
					  sourceStat:{// 溯源模块
						  
					  },
					  rejectRate:0,
					  passRate:0,
					})
					const baseListsArr = ref([])
					const notesInfo = ref({
						title:'',
						content:'',
					})
					const weatherInfo = ref({
						temp:'', //   温度
						humidity:'', //  湿度
					})
					const productMaps = ref([]) //蔬菜列表
					const productArr = ref([]) //蔬菜价格列表
					const productid = ref('')
					const hoursMin = ref('00:00');
					const yearMonth = ref('');
					let timer = null;
					const currentPage = ref(1);
					const outerVisible = ref(false)
					const pageSize = ref(10);
					const total = ref(0);
					const townMaps = ref([]) //镇的数据
					let mapCharts
					onMounted(() => {
						mapCharts = echarts.init(document.getElementById('mapView'));
						// 获取基本数据
						$.ajax({
							url: baseUrl + 'home/info',
							type: 'POST', //HTTP请求类型
							timeout: 15000,
							success: function(data) {
								townMaps.value = data.data.info.townMaps
							    initMap()
								let info = data.data.info
								let rejectRate = info.sourceStat.rejectRate?.split("%")[0]
								let passRate = info.sourceStat.passRate?.split("%")[0]
								baseInfo.value = {
									title: info.title,     
									introduce:info.introduce, 
									baseCnt: info.baseCnt, 
									baseArea:info.baseArea,
									greenhouseCnt: info.greenhouseCnt,
									greenhouseNormalCnt: info.greenhouseNormalCnt,
									greenhouseMaintenanceCnt: info.greenhouseMaintenanceCnt,
									greenhouseArea:info.greenhouseArea, 
									areaUseRate:info.areaUseRate, 
									sourceStat:info.sourceStat, 
									rejectRate:Number(rejectRate),
									passRate:Number(passRate),
								}
								
								
								// data.data.info.townMaps.forEach(item=>{
								// 	if(item.name=='镇罗镇'){
								// 		searchIn1.value = item
								// 	}
								// })
								// console.log(townMaps.value)
								nextTick(() => {
								  totalData(info.greenhouseNormalCnt,info.greenhouseMaintenanceCnt)
								})
							},
						})
						initPrice()
						// 基地统计列表
						$.ajax({
							url: baseUrl + 'home/baseLists',
							type: 'POST', //HTTP请求类型
							timeout: 15000,
							success: function(data) {
								baseListsArr.value = data.data.list
							},
						})
						
						const nowTod = new Date();
						yearMonth.value = nowTod.getFullYear() + '/' + (nowTod.getMonth() + 1) + '/' +nowTod.getDate() +'/'
						updateTime();
						timer = setInterval(updateTime, 1000);
						nextTick(() => {
							// 蔬菜蔬菜价格折线图统计
							$.ajax({
								url: baseUrl + 'home/productLineStats',
								type: 'POST', //HTTP请求类型
								timeout: 15000,
								success: function(data) {
									let alldata = data.data
									productMaps.value = alldata.productMaps
									productid.value = alldata.productMaps[0].id
									productChange(productid.value) //基础数据
								},
							})
							// 天气
							$.ajax({
								url: baseUrl + 'weather/now',
								type: 'POST', //HTTP请求类型
								timeout: 15000,
								success: function(data) {
									// console.log(data)
									weatherInfo.value = data.data
								},
							})
							
							// 消息
							$.ajax({
								url: baseUrl + 'home/notices',
								type: 'POST', //HTTP请求类型
								timeout: 15000,
								success: function(data) {
									notesInfo.value = data.data
								},
							})
							initbasicData() //基础数据
							
						})
					});
					
					// 统计
					const totalData = (greenhouseNormalCnt,greenhouseMaintenanceCnt) =>{
						// 统计
						let pieCharts = echarts.init(document.getElementById('totalId'));
						pieCharts.setOption(pieChartFun([
							{
								"name": "已改造",
								"value": greenhouseNormalCnt,
								"count": greenhouseNormalCnt
							},
							{
								"name": "未改造",
								"value": greenhouseMaintenanceCnt,
								"count": greenhouseMaintenanceCnt
							},
						],{
							unit:'name',
							radius:['55%', '72%'],
							center:['23%', '44%']
						}));
					}
					// 基础数据
					const initbasicData = (datvalue, datares) => {
						// 数据统计
						let datastatisticsCharts = echarts.init(document.getElementById('datastatistics'));
						$.ajax({
							url: baseUrl + 'home/productBarStats',
							type: 'POST', //HTTP请求类型
							timeout: 15000,
							success: function(data) {
								// console.log(data.data)
								data.data.xData[0].color = '#00CCD2'
								data.data.xData[1].color = '#FFC400'
								let datah = {
									xData: data.data.yData,
									legendShow: true,
									yData: data.data.xData
								}
								datastatisticsCharts.setOption(JSON.parse(JSON.stringify(barHengChartFun(datah))));
							},
						})
						
						let lineBar2Charts = echarts.init(document.getElementById('harmful'));
						let data1 = {
							xData: ['2020', '2021', '2022', '2023', '2024'],
							legendShow: true,
							// unit:'个',
							yData: [{
								value: [40, 45, 60, 90, 120],
								type: 'line',
								name: "烟粉量",
								color: 'rgba(139, 209, 182, 1)'
							}, ]
						}
						lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data1))));
					}
					
					const initPrice = () =>{
						// 价格列表
						$.ajax({
							url: baseUrl + 'home/productPriceList',
							type: 'POST', 
							data: {page:currentPage.value,limit:9},
							timeout: 15000,
							success: function(data) {
								total.value = data.data.total
								productArr.value = data.data.list
							},
						})
					}
					
					const handleCurrentChange = (val) => {
					  currentPage.value = val;
					  initPrice()
					};
					
					// 地图
					const initMap = (Val) =>{
						if(Val){
							searchValue.value = Val.name
							searchIn.value = Val
							selectItemFlag.value = false
						}
					    fetch('/screen/assets/area.json')
						.then(response => response.json())
						.then(areaData => {
							let  newareaData = areaData.features.filter(obj => obj.properties.name != '蒿川乡');
							areaData.features = newareaData
							
							let cityname = searchValue.value == '全部村镇' ? '沙坡头区' : searchValue.value
							let zommN = cityname == '沙坡头区' ? 0.7 : 0.52
							let cityData;
							if(searchValue.value == '全部村镇'){
							  cityData = areaData
							} else {
							  cityData = {
								"type": "FeatureCollection",
								"name": "沙坡头区",
								"features": areaData.features.filter((item)=>{
								  return searchValue.value == item.properties.name
								})
							  }
							}
							echarts.registerMap(cityname, cityData);
							let data1 = cityData.features.map((item) => {
							  return {
								name: item.properties.name,
							  };
							});
							let mapOption = mapChartFun(cityname,data1,zommN,townMaps.value)
							mapCharts.setOption(mapOption, true)
							if(searchValue.value == '全部村镇'){
							  mapCharts.dispatchAction({
							    type: 'highlight',
							    seriesIndex: 0,
							    name: '镇罗镇' 
							  });
							  mapCharts.dispatchAction({
							    type: 'showTip',
							    seriesIndex: 0,
							    name: '镇罗镇' 
							  });
							} else {
							  mapCharts.dispatchAction({
							    type: 'showTip',
							    seriesIndex: 0,
							    name: searchValue.value
							  });
							}
						})
						mapCharts.on('click', function(params) {
							console.log(params)
							if( params.name == '镇罗镇') {
								window.location.href='./regulatory.html'
							} else {
								mapCharts.dispatchAction({
									type: 'showTip',
									seriesIndex: 0,
									dataIndex: params.dataIndex
								});
							}
						});
						
					}
					const productChange = (val) => {
					  productid.value = val
					  $.ajax({
					  	url: baseUrl + 'home/productLineStats',
					  	type: 'POST', //HTTP请求类型
						data:{id:val},
					  	timeout: 15000,
					  	success: function(data) {
							let lindata = data.data
					  		console.log(lindata)
							nextTick(() => {
								let lineAreaCharts = echarts.init(document.getElementById('centerBottonL'));
								let lineAreaChartsR = echarts.init(document.getElementById('centerBottonR'));
								let data2 = {
									xData: lindata.monthLine.xData,
									legendShow: true,
									// name:'单位：',
									unit: '单位：',
									color: [
										['rgba(255, 160, 108, 0.2)', 'rgba(255, 160, 108, 0.6)',
											'rgba(255, 160, 108, 1)'
										],
										['rgba(139, 209, 182, 0.2)', 'rgba(139, 209, 182, 0.6)',
											'rgba(139, 209, 182, 1)'
										],
									],
									yData: lindata.monthLine.yData,
									labelflag: false,
									legendTop:'4',
									itemGap:10,
									fontSize:10

								}
								let data3 = {
									xData: lindata.weekLine.xData,
									legendShow: true,
									// name:'单位：',
									unit: '单位：',
									color: [
										['rgba(255, 160, 108, 0.2)', 'rgba(255, 160, 108, 0.6)',
											'rgba(255, 160, 108, 1)'
										],
										['rgba(139, 209, 182, 0.2)', 'rgba(139, 209, 182, 0.6)',
											'rgba(139, 209, 182, 1)'
										],
									],
									yData: lindata.weekLine.yData,
									legendTop:'4',
									itemGap:8,
									fontSize:10
								}
								lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data2))));
								lineAreaChartsR.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun(data3))));
							})
					  	},
					  })
					};
					const goBig = () =>{
						window.location.href='./bigData.html'
					}
					const updateTime = () => {
					  const now = new Date();
					  hoursMin.value = formatTimeUnit(now.getHours()) + ':' + formatTimeUnit(now.getMinutes())
					};
					
					const formatTimeUnit = (unit) => {
					  return unit < 10 ? '0' + unit : unit.toString();
					};
					return {
						baseInfo,
						baseListsArr,
						notesInfo,
						weatherInfo,
						productMaps,
						productid,
						productChange,
						hoursMin,
						yearMonth,
						outerVisible,
						currentPage,
						total,
						pageSize,
						productArr,
						handleCurrentChange,
						searchValue,
						searchIn,
						searchIn1,
						townMaps,
						selectItemFlag,
						initMap,
						goBig
					};
				}
			}).use(ElementPlus).mount('#ListRenovation');
		</script>
	</body>

</html>